<template>
  <div>
    <Card class="search">
      <Row>
        <Form inline :label-width="70">
          <FormItem label="用户名">
            <Input placeholder="请输入用户名" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>

          <FormItem label="部门">
            <Cascader filterable placeholder="请选择部门搜索部门" size="large" clearable style="width: 200px;"></Cascader>
          </FormItem>
          <span v-if="drop">
          <FormItem label="手机号"><Input placeholder="请输入手机号" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="邮箱"><Input placeholder="请输入邮箱" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="性别">
             <Select style="width:200px" placeholder="请选择性别" size="large">
               <Option value="1" label="男"></Option>
               <Option value="0" label="女"></Option>
            </Select>
          </FormItem>
          <FormItem label="登录账号"><Input placeholder="请输入登录账号" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="用户ID"><Input placeholder="请输入用户ID" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="创建时间"><Input placeholder="请输入创建时间" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
        </span>
          <FormItem>
            <Button type="primary" size="large" icon="ios-search">搜索</Button>
            <Button size="large" style="margin-left: 8px">重置</Button>
            <a @click="dropDown">
              {{dropDownContent}}
              <Icon :type="dropDownIcon"></Icon>
            </a>
          </FormItem>
        </Form>
      </Row>
      <Row class="operation">
        <Button size="large" type="primary" icon="md-add" @click="openDrawer('add',{})">添加用户</Button>
        <Button size="large" icon="md-trash" @click="deleteUserList">批量删除</Button>
        <Dropdown>
          <Button size="large">
            更多操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>重置用户密码</DropdownItem>
            <DropdownItem>导出所选数据</DropdownItem>
            <DropdownItem> 导出全部数据</DropdownItem>
            <DropdownItem>导入数据</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Button size="large" type="dashed" @click="selectUserAllByPage">刷新</Button>
        <Button size="large" type="dashed">关闭搜索</Button>
        <Button size="large" type="dashed">关闭提示</Button>
      </Row>
      <Alert show-icon>已选择 <a>{{selectCount}}</a> 项 <a @click="clear">清空</a></Alert>
      <Table :columns="userColumns" ref="table" :data="userList" border draggable >

        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="openDrawer('edit',row)">修改</Button>
          <Button size="small" style="margin-right: 5px" @click="deleteOne(row.id)">禁用</Button>
          <Button type="error" size="small" @click="deleteOne(row.id)">删除</Button>
        </template>
      </Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="page.total" :current="page.pageNum" @on-change="pageChange"
                @on-page-size-change="pageSizeChange" :page-size="page.pageSize" show-total show-elevator show-sizer/>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import { selectAllByPage, deleteUserList } from '@/api/user-api.js'
import { selectAuthClientByPage } from '@/api/auth-api'

export default {

  name: 'user_list',
  data () {
    return {
      openEdit: false,
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      drop: false,
      selectCount: 0,
      dropDownContent: '展开',
      dropDownIcon: 'ios-arrow-down',
      userColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
          ellipsis: true
        },
        {
          title: '客户端ID',
          key: 'clientId',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          fixed: 'left',
          width: 150
        },
        {
          title: '用户名',
          key: 'nickName',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          fixed: 'left',
          width: 150
        },
        {
          title: '头像',
          key: 'avatar',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          width: 150,
          render: (h, params) => {
            let src = params.row.avatar
            return h('Avatar', {
              props: {
                src: src
              }
            })
          }
        },
        {
          title: '所属部门',
          key: 'description',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          width: 150
        },
        {
          title: '手机',
          key: 'mobile',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          width: 200
        },
        {
          title: '邮箱',
          key: 'email',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          width: 200
        }, {
          title: '性别',
          key: 'sex',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          width: 150
        },
        {
          title: '类型',
          key: 'type',
          width: 150,
          resizable: true,
          filters: [{
            label: '单名',
            value: 1
          }, {
            label: '多名',
            value: 2
          }],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 1) {
              return row.age > 25
            } else if (value === 2) {
              return row.age < 25
            }
          }
        },
        {
          title: '状态',
          key: 'status',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          width: 150
        },
        {
          title: '创建时间',
          key: 'createTime',
          sortable: true,
          ellipsis: true,
          tooltip: true,
          resizable: true,
          width: 200
        }, {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center',
          resizable: true,
          fixed: 'right'
        }
      ],
      userList: []
    }
  },
  created () {
    this.selectUserAllByPage()
  },
  methods: {
    deleteOne (id) {
      deleteUserList([id]).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success('删除成功')
          this.selectUserAllByPage()
        } else {
          this.$Message.warning(data.msg)
        }
      }).catch(err => {
        this.$Message.error('删除用户失败')
      })
    },
    deleteUserList () {
      let users = this.$refs.table.getSelection()
      let ids = []
      users.forEach(v => ids.push(v.id))
      if (ids.length === 0) {
        this.$Message.warning('请选择需要删除的用户')
      }
      deleteUserList(ids).then(res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success('删除成功')
          this.selectUserAllByPage()
        } else {
          this.$Message.warning(data.msg)
        }
      }).catch(err => {
        this.$Message.error('删除用户失败')
      })
    },
    /**
       * 关闭抽屉
       * @param value 是否关闭
       */
    closeDrawer (value) {
      this.openEdit = value
    },
    /**
       * 打开抽屉
       * @param type edit 修改 add 添加
       * @param row 用户数据,用于回显
       */
    openDrawer (type, row) {
      this.openEdit = true
    },
    /**
       * 查询用户列表
       */
    selectUserAllByPage () {
      let data = {
        'isAsc': true,
        'orders': [],
        'pageNum': this.page.pageNum,
        'pageSize': this.page.pageSize
      }
      selectAllByPage(data).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.page.total = data.data.total
          this.userList = data.data.records
        }
      })
    },
    /**
       * 操作搜索框
       */
    dropDown () {
      if (this.drop) {
        this.dropDownContent = '展开'
        this.dropDownIcon = 'ios-arrow-down'
      } else {
        this.dropDownContent = '收起'
        this.dropDownIcon = 'ios-arrow-up'
      }
      this.drop = !this.drop
    },
    // 清空多选
    clear () {
      this.$refs.table.selectAll(false)
    },
    pageChange (num) {
      this.page.pageNum = num
      this.selectUserAllByPage()
    },
    pageSizeChange (size) {
      this.page.pageSize = size
      this.selectUserAllByPage()
    }
  }
}
</script>

<style>
  .operation Button {
    margin: 8px;
  }

</style>
